import React from 'react'

/**
 * this.setState() 修改 state 值
 * 
 * this.setState() 两个作用
 * 
 * ① 修改数据
 * ② 更新视图
 */

export default class App extends React.Component {
  state = {
    name: '百里玄策',
    age: 3
  }

  handle () {
    console.log(this)
    this.setState({
      name: '亚瑟',
      age: this.state.age + 1
    })
  }

  render () {
    return (
      <div>
        <p>姓名： { this.state.name }，年龄：  { this.state.age }</p>
        <p>
          {/* 使用箭头函数为什么能够修改 this 指向 */}
          {/* 因为箭头函数内部的 this 指向所在区间 */}
          {/* 那么所在的区间是 render, render 内部的 this 指向组件实例 */}
          {/* 所以这时候，就能够使用 this 调用 setState 方法即可 */}
          <button onClick={ () => this.handle() }>修改state值</button>
        </p>
      </div>
    )
  }
}
